<template>
    <div class="main">
        <!-- <myHead title="我的" :show="true"></myHead> -->
        <div class="img-box">
            <template v-if="userinfo" >
                <img  v-if="userinfo.avatar"  @click="uploadAction" :src="userinfo.avatar.replace(/public/,$baseURL)" alt="" class="userimg">
                <img  v-else  @click="uploadAction" :src="pic" alt="" class="userimg">
            </template>
            <img  v-else  @click="$router.push({name:'login'})" :src="pic" alt="" class="userimg">
            <!-- <img :src="pic" alt="" @click="uploadAction" class="userimg"> -->
            <input type="file" class="inputfile" ref="upload" @change="startUpload">
            <div class="nick-name" @click="goLogin" v-if="!appphone">
                立即登录
            </div>
            <div v-else class="nick-name">
                <template v-if="userinfo">
                {{userinfo.username}} / {{userinfo.phone}}
                </template>
            </div>
        </div>
        <ul class="order-list">
            <li>
                <van-icon name="shop-collect-o" size='26px'/>
                <p>电影订单</p>
            </li>
            <li>
                <van-icon name="orders-o" size='26px'/>
                <p>商品订单</p>
            </li>
        </ul>
        <van-cell-group>
            <van-cell title="优惠券" icon='coupon-o' is-link :to="{name:'quan'}"/>
            <van-cell title="红包"  icon='gift-o' is-link :to="{name:'redpacket'}"/>
            <van-cell title="余额" icon='pending-payment' is-link :to="{name:'balance'}"/>
            <van-cell title="设置" icon='setting-o' is-link :to="{name:'setting'}"/>
        </van-cell-group>
        <p style="text-align:center">
            <!-- <van-button type="info" round class='exit' plain  @click="showPopup">退出登录</van-button> -->
            <van-cell is-link @click="exitUser">退出登录</van-cell>
        </p>
    </div>
</template>
<script>
import { Dialog } from 'vant';
export default {
    setup() {
        
    },
    data(){
        return{
            show:false,
            pic:require('../../../public/img/cat.jpeg')
        }
    },
    methods:{
        uploadAction(){
            // console.log(111);
            if(this.appphone){
                this.$refs.upload.click()
            }else{
                this.$router.push({name:'login'})
            }
        },
        startUpload(){
            // console.log("ok");
            var file = this.$refs.upload.files[0]
            // console.log(file);
            var data = new FormData();
            data.append('avatar',file)
            this.$ajax.sendAvatar(data)
            .then(res=>{
                if(res.code==200){
                    this.pic = res.avatar.replace(/public/,this.$baseURL)
                     this.changeUserInfo({
                        avatar:res.avatar
                    })
                }
            })
        },
        goLogin(){
            this.$router.push({name:'login'})  
        },
        exitUser(){
            Dialog.confirm({
                title: '退出提示',
                message: '确定退出吗',
            })
            .then(() => {
                    // on confirm
                this.$router.push({name:'login'})
                localStorage.removeItem('server_token')
                // vueX
                this.changeAppPhone(null)
            })
            .catch(() => {
                    // on cancel
            });
        }
    },
    mounted(){
        if(this.appphone){
            this.$ajax.getuserinfo({
                phone:this.appphone
            })
            .then(res=>{
                if(res.code==200){
                    this.changeUserInfo(res.result)
                }else{
                    this.changeAppPhone(null)
                }
            })
            .catch(err=>{

            })
        }
        if(this.userinfo){

        }
    },
}
</script>
<style scoped lang='scss'>
    .mine{
        overflow: auto;
        height: 100%;
    }
    .exit{
        margin: 20px auto;
        width: 250px;
    }
    .img-box{
        background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png) no-repeat;
        /* background-position: 100% 100%; */
        background-size: cover;
        // height: 180px;
        padding: 44px 0 44px 22px;
        display: flex;
    }
    .nick-name{
        color: #fff;
        font-size: 16px;
        margin:20px 0 0 20px;
    }
    .order-list{
        display: flex;
        text-align: center;
        background: #fff;
        padding: 15px;
        margin-bottom: 15px;
        li{
            width: 50%;
            color: #797d82;
            font-size: 14px;
        }
    }
    .userimg{
        width:67px;
        height:67px;
        border-radius: 50%;
    }
    .inputfile{
        display: none;
    }
</style>